<nav class="navbar navbar-pf-alt" role="navigation">
  <div row flex class="navbar-header hidden-xs">
    <a class="navbar-home" href="./"><span class="fa-fw pficon pficon-home" aria-hidden="true"></span> <span class="visible-xlg-inline-block"> {{'Projects' | translate}}</span></a>
  </div>
  <div class="nav navbar-project-menu">
    <div row hawtio-extension name="nav-system-status-mobile">
      <!-- mobile nav menu -->
      <div row flex class="navbar-flex-btn toggle-menu">
        <button type="button" class="navbar-toggle project-action-btn ng-isolate-scope" data-toggle="collapse" data-target=".navbar-collapse-1">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>
      <div flex class="form-group">
        <!-- TODO add multiple attribute back to the select tag when we support selecting multiple -->
        <!-- Use title="" to prevent "Nothing selected" from briefly flashing while the projects are still loading. -->
        <select class="selectpicker form-control" data-selected-text-format="count>3" id="boostrapSelect" title=""></select>
      </div>
      <!-- create buttons show at mobile -->
      <div row flex class="navbar-flex-btn project-action">
        <a row class="project-action-btn" href="project/{{project.metadata.name}}/create" ng-disabled="project.status.phase != 'Active'" title="Add to project">
          <i class="fa fa-plus visible-xs-inline-block"></i><span class="hidden-xs">{{'Addtoproject' | translate}}</span>
        </a>
      </div>
    </div>
  </div> <!-- /navbar-project-menu -->
  <navbar-utility class="hidden-xs"></navbar-utility>
</nav>
